<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识消消乐</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #FFF8F0; /* 奶白色背景 */
            text-align: center;
            margin: 0;
            padding: 20px;
            user-select: none;
        }
        
        h1 {
            color: #FF6B6B;
            font-size: 3em;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .game-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .bubble-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 15px;
            max-width: 1000px;
        }
        
        .bubble {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            color: white;
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transform-style: preserve-3d;
            transition: all 0.3s ease;
            padding: 5px;
            word-break: break-word;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .bubble:hover {
            transform: translateY(-5px) scale(1.05);
        }
        
        .bubble.selected {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            filter: brightness(1.2);
        }
        
        .bubble.matched {
            visibility: hidden;
            opacity: 0;
            transform: scale(0);
            transition: all 0.5s ease;
        }
        
        .timer {
            font-size: 1.5em;
            color: #4ECDC4;
            margin-bottom: 20px;
        }
        
        .success-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            z-index: 100;
            display: none;
        }
        
        .success-message h2 {
            color: #4ECDC4;
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .success-message p {
            font-size: 1.5em;
            color: #555;
        }
        
        .restart-btn {
            background-color: #FF6B6B;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1.2em;
            border-radius: 30px;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        
        .restart-btn:hover {
            background-color: #FF8E8E;
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <h1>知识消消乐</h1>
    <div class="timer">时间: <span id="time">00:00</span></div>
    <div class="game-container">
        <div class="bubble-grid" id="bubbleGrid"></div>
    </div>
    
    <div class="success-message" id="successMessage">
        <h2>恭喜你挑战成功！</h2>
        <p>用时: <span id="finalTime">00:00</span></p>
        <button class="restart-btn" onclick="startGame()">再玩一次</button>
    </div>
    
    <audio id="bubbleSound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
    
    <script>
        // 知识点配对数据 - 可以自行扩展
        const knowledgePairs = [
            { question: "苹果", answer: "apple" },
            { question: "香蕉", answer: "banana" },
            { question: "5 + 7", answer: "12" },
            { question: "9 × 8", answer: "72" },
            { question: "水的化学式", answer: "H₂O" },
            { question: "中国首都", answer: "北京" },
            { question: "法国首都", answer: "巴黎" },
            { question: "π (pi)", answer: "3.14" },
            { question: "光合作用", answer: "植物制造氧气" },
            { question: "重力加速度", answer: "9.8 m/s²" },
            { question: "哺乳动物", answer: "胎生动物" },
            { question: "太阳系行星数", answer: "8" },
            { question: "2的10次方", answer: "1024" },
            { question: "1000米", answer: "1公里" },
            { question: "电脑之父", answer: "图灵" },
            { question: "WWW发明者", answer: "蒂姆·伯纳斯-李" },
            { question: "氧气", answer: "O₂" },
            { question: "二氧化碳", answer: "CO₂" },
            { question: "16进制F", answer: "15" },
            { question: "1字节", answer: "8位" },
            { question: "光速", answer: "3×10⁸ m/s" },
            { question: "牛顿第一定律", answer: "惯性定律" },
            { question: "直角三角形", answer: "勾股定理" },
            { question: "最大大陆", answer: "亚洲" }
        ];
        
        // 游戏变量
        let selectedBubbles = [];
        let matchedPairs = 0;
        let startTime;
        let timerInterval;
        let bubbleSound;
        
        // 初始化游戏
        window.onload = function() {
            bubbleSound = document.getElementById("bubbleSound");
            startGame();
        };
        
        // 开始游戏
        function startGame() {
            // 重置游戏状态
            selectedBubbles = [];
            matchedPairs = 0;
            clearInterval(timerInterval);
            
            // 隐藏成功消息
            document.getElementById("successMessage").style.display = "none";
            
            // 创建泡泡
            createBubbles();
            
            // 开始计时
            startTime = new Date();
            updateTimer();
            timerInterval = setInterval(updateTimer, 1000);
        }
        
        // 创建泡泡
        function createBubbles() {
            const bubbleGrid = document.getElementById("bubbleGrid");
            bubbleGrid.innerHTML = "";
            
            // 随机选择8对知识点
            const shuffledPairs = [...knowledgePairs].sort(() => 0.5 - Math.random()).slice(0, 8);
            const gameItems = [];
            
            // 创建问题和答案项
            shuffledPairs.forEach(pair => {
                gameItems.push({ text: pair.question, match: pair.answer, type: "question" });
                gameItems.push({ text: pair.answer, match: pair.question, type: "answer" });
            });
            
            // 随机排序
            gameItems.sort(() => 0.5 - Math.random());
            
            // 创建泡泡
            gameItems.forEach((item, index) => {
                const bubble = document.createElement("div");
                bubble.className = "bubble";
                bubble.textContent = item.text;
                bubble.dataset.match = item.match;
                bubble.dataset.index = index;
                
                // 随机颜色
                const hue = Math.floor(Math.random() * 360);
                bubble.style.backgroundColor = `hsl(${hue}, 70%, 60%)`;
                
                // 3D效果
                bubble.style.transform = `rotateX(${Math.random() * 20 - 10}deg) rotateY(${Math.random() * 20 - 10}deg)`;
                
                // 点击事件
                bubble.addEventListener("click", () => handleBubbleClick(bubble));
                
                bubbleGrid.appendChild(bubble);
            });
        }
        
        // 处理泡泡点击
        function handleBubbleClick(bubble) {
            // 如果已经选中或已匹配，则忽略
            if (bubble.classList.contains("selected") || bubble.classList.contains("matched")) {
                return;
            }
            
            // 播放泡泡音效
            playBubbleSound();
            
            // 如果已经选中了一个泡泡
            if (selectedBubbles.length === 1) {
                const firstBubble = selectedBubbles[0];
                
                // 不能点击同一个泡泡两次
                if (firstBubble === bubble) {
                    return;
                }
                
                // 选中第二个泡泡
                bubble.classList.add("selected");
                selectedBubbles.push(bubble);
                
                // 检查是否匹配
                if (checkMatch(firstBubble, bubble)) {
                    // 匹配成功
                    setTimeout(() => {
                        firstBubble.classList.add("matched");
                        bubble.classList.add("matched");
                        selectedBubbles = [];
                        matchedPairs++;
                        
                        // 检查游戏是否结束
                        if (matchedPairs === 8) {
                            endGame();
                        }
                    }, 500);
                } else {
                    // 不匹配
                    setTimeout(() => {
                        firstBubble.classList.remove("selected");
                        bubble.classList.remove("selected");
                        selectedBubbles = [];
                    }, 1000);
                }
            } else {
                // 选中第一个泡泡
                bubble.classList.add("selected");
                selectedBubbles = [bubble];
            }
        }
        
        // 检查两个泡泡是否匹配
        function checkMatch(bubble1, bubble2) {
            return bubble1.textContent === bubble2.dataset.match && 
                   bubble2.textContent === bubble1.dataset.match;
        }
        
        // 更新计时器
        function updateTimer() {
            const currentTime = new Date();
            const elapsedTime = Math.floor((currentTime - startTime) / 1000);
            const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, "0");
            const seconds = (elapsedTime % 60).toString().padStart(2, "0");
            document.getElementById("time").textContent = `${minutes}:${seconds}`;
        }
        
        // 结束游戏
        function endGame() {
            clearInterval(timerInterval);
            document.getElementById("finalTime").textContent = document.getElementById("time").textContent;
            document.getElementById("successMessage").style.display = "block";
        }
        
        // 播放泡泡音效
        function playBubbleSound() {
            bubbleSound.currentTime = 0;
            bubbleSound.play().catch(e => console.log("无法播放音效:", e));
        }
    </script>
</body>
</html>